<template>
  <div class="d-game bg-fog-52">
    <div
      class="headers flex items-center justify-between px-12px h-44px relative"
    >
      <span class="flex items-center gap-8px">
        <svg
          viewBox="0 0 20 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          class="h-20px"
        >
          <path
            d="M1.08 10.592a.834.834 0 010-1.179l6.667-6.666a.834.834 0 111.178 1.178L3.681 9.169h14.655a.833.833 0 110 1.667H3.68l5.244 5.244a.833.833 0 01-1.178 1.178L1.08 10.592z"
            fill="currentColor"
          ></path>
        </svg>
        <span
          class="text-16px font-700 text-text-1 flex items-center"
          @click="gameTypeVisible = !gameTypeVisible"
        >
          Two star-direct selection duplex
          <img
            class="w-16px rotate-90"
            src=""
            alt=""
          />
        </span>
      </span>

      <img
        class="h-24px"
        src=""
        alt=""
      />
      <div
        v-if="gameTypeVisible"
        class="flex pt-30px px-25px pb-10px justify-between absolute top-55px w-[100vw] bg-fog-48 z-100 left-0 rounded-b-8px"
      >
        <div
          @click="activeGameType = 'duplex'"
          :class="activeGameType === 'duplex' && 'bg-fog-6'"
          class="item mb-20px w-90px border-border-10 border-solid border-1px rounded-8px flex items-center text-center text-text-3 text-12px"
        >
          Two star-direct selection duplex
        </div>
        <div
          @click="activeGameType = 'plate'"
          :class="activeGameType === 'plate' && 'bg-fog-6'"
          class="item mb-20px  w-90px border-border-10 border-solid border-1px rounded-8px flex items-center text-center text-text-3 text-12px"
        >
          Two-sided plate
        </div>
        <div
          @click="activeGameType = 'pick'"
          :class="activeGameType === 'pick' && 'bg-fog-6'"
          class="item mb-20px  w-90px border-border-10 border-solid border-1px rounded-8px flex items-center text-center text-text-3 text-12px"
        >
          Pick a location
        </div>
      </div>
    </div>
    <div class="py-20px flex justify-center gap-24px">
      <div class="left">
        <div class="flex text-12px justify-between mb-4px">
          <div>Tokyo2D</div>
          <div>046period</div>
        </div>
        <BcCountDown :countSeconds="300000" />
      </div>
      <div class="right flex flex-col items-center border-left pl-24px">
        <div class="text-12px mb-4px">
          01/19-046period
        </div>
        <div class="flex gap-12px">
          <div
            class="h-30px w-30px bg-fog-6 rounded-30px text-text-3 flex items-center justify-center"
          >
            3
          </div>
          <div
            class="h-30px w-30px bg-fog-6 rounded-30px text-text-3 flex items-center justify-center"
          >
            6
          </div>
        </div>
      </div>
    </div>
    <GameTabs v-model:value="tabValue"></GameTabs>
    <div v-if="tabValue === 'bet'">
      <Duplex
        v-model:value="checkList"
        class="mt-12px"
        v-if="activeGameType === 'duplex'"
      ></Duplex>
      <Plate
        v-model:value="checkList_2"
        class="mt-12px"
        v-if="activeGameType === 'plate'"
      ></Plate>
      <div class="flex flex-col items-center mb-4px pt-6px">
        <span class="text-12px">
          The upper limit of winning the same lottery in the same period is
        </span>
        <span class="text-10px mt-4px">
          675,000₹
        </span>
      </div>
      <div class="flex pr-16px gap-2px justify-between">
        <div class="flex d-game__input rounded-4px w-191px flex-shrink-0">
          <van-field clearable type="text" autocomplete="off" />
          <div
            class="h-40px w-40px flex items-center justify-center bg-fog-6 rounded-r-4px"
          >
            <img
              class="h-12px"
              src=""
              alt=""
            />
          </div>
        </div>
        <div
          class="border-border-1 border-1px rounded-4px border-solid  h-40px flex items-center "
        >
          <img
            class="h-20px"
            src=""
          />
          <span class="text-12px whitespace-nowrap text-text-3">
            Number Basket
          </span>
        </div>
        <div
          class="h-40px w-55px rounded-4px bg-fog-6 text-text-21 justify-center flex items-center text-12px"
        >
          Bet
        </div>
      </div>
      <div class="text-12px flex justify-between pr-16px mt-8px">
        <div>
          <span>0</span>
          /
          <span>0</span>
        </div>
        <div>
          <span>
            Available Balance 211
          </span>
          |
          <span>
            topup
          </span>
        </div>
      </div>
    </div>
    <TrendComponent v-if="tabValue === 'Trend'" class="mt-12px" />
  </div>
</template>

<script setup lang="ts">
import GameTabs from "./components/game-tabs.vue";
import Duplex from "./components/duplex.vue";
import Plate from "./components/plate.vue";
import BcCountDown from "@/components/bc-count-down/index.vue";
import TrendComponent from "./components/trend-component.vue";
const checkList = ref([]);
const checkList_2 = ref([]);
const tabValue = ref("bet");
const activeGameType = ref("duplex");
const gameTypeVisible = ref(false);
</script>

<style lang="less" scoped>
.border-left {
  border-left: 1px solid #676d7c;
}
.d-game {
  :deep(.van-field) {
    margin: 0;
  }
  &__input {
    border: 1px solid var(--border-10);
  }
}
</style>
